<template>
  <div class='container'>
    <el-card class="box-card">
      <strong style="fontSize: 14px" class="box-strong">关键字</strong>
      <el-input v-model="queryInfo.keyword" class="box-ipt"></el-input>
      <el-button type="primary" size="small" style=" float: right;margin-right: 10px;" @click="search">搜索</el-button>
      <el-button size="small" style=" float: right;margin-right: 10px;" @click="eliminate">清除</el-button>
      <el-alert :title="'数据一共'+counts+'条'" type="info" show-icon :closable="false" class="box-alert"></el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="100" :formatter="type"> </el-table-column>
        <el-table-column prop="username" label="题型编号" width="200">
          <template slot-scope="scope">
            <div>
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">{{ item.number }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)"> </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <div>
              <el-button type="danger" icon="el-icon-delete" circle plain @click="deleteBtn(scope.row.id)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pagesize" layout=" prev, pager, next,sizes, jumper" :total="400" class="paging-right"></el-pagination>
    </el-card>

    <!-- 试题预览区域 -->
    <el-dialog title="题目预览" :visible.sync="previewVisible" width="55%">
      <el-row class="text">
        <el-col :span="6">
          <span v-if="previewQuestion.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="previewQuestion.questionType === '2'">【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">
          <span> 【编号】：{{ previewQuestion.id }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="previewQuestion.difficulty === '1'">【题型】：简单</span>
          <span v-else-if="previewQuestion.difficulty === '2'">【题型】：一般</span>
          <span v-else>【题型】：困难</span>
        </el-col>
        <el-col :span="6">
          <span> 【标签】：{{ previewQuestion.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="text">
        <el-col :span="6">
          <span>【学科】：{{ previewQuestion.subject }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ previewQuestion.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ previewQuestion.direction }}</span>
        </el-col>
        <el-col :span="6"> </el-col>
      </el-row>
      <hr />
      <!-- 题干部分 -->
      <span>[题干:]</span><br />
      <span  style="color:blue ; margin: 10px 0" v-html="previewQuestion.question"></span>
      <div>
        <div v-if="previewQuestion.questionType='1'">
          <span>{{previewQuestion.questionType | questionType}} 选项 : (以下选中的选项为正确答案)</span>
        </div>
        <div v-else-if="previewQuestion.questionType='2'">
          <span>{{previewQuestion.questionType | questionType}} 选项 : (以下选中的选项为正确答案)</span>
        </div>
        <div v-else>
          <span>{{previewQuestion.questionType | questionType}} 答案</span>
        </div>
      </div>
      <!-- 单选框 -->
      <!-- data中的数据 radio: 1  由于单选框只有一个isRight 判断相等 按钮选中-->
      <el-radio-group v-model="radio" v-if="previewQuestion.questionType === '1'" disabled>
        <el-row v-for="(item, index) in previewQuestion.options" :key="index" style="margin:10px 0px">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <!-- 多选框 -->
      <div v-if="previewQuestion.questionType === '2'">
        <el-row v-for="(item, index) in options" :key="index" style="margin:10px 0px">
          <el-checkbox v-model="item.isRight" :disabled="item.isRight === 0"> {{ item.title }} </el-checkbox>
        </el-row>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" @click="isVideoShow = true">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="isVideoShow">
        <video :src="previewQuestion.videoURL" controls="controls" class="video"></video>
      </el-row>
      <div v-html="previewQuestion.answer"></div>
      <hr />
      <el-row class="answer">
        <span>【答案解析】：https://cn.vuejs.org/ 有答案 </span>
      </el-row>

      <hr />
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false" type="primary" size="mini">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      // 总条数
      counts: '',
      // 控制预览显示
      previewVisible: false,
      // 获取组件列表携带参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      // 列表数据
      tableData: [],
      // 预览题目数据
      previewQuestion: {
      },
      radio: 1,
      isVideoShow: false
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 分页
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getSubjectList()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getSubjectList()
    },
    // 获取列表数据
    async getSubjectList () {
      const { data: res } = await randoms(this.queryInfo)
      console.log(res)
      this.counts = res.counts
      this.tableData = res.items
    },
    // 搜索
    search () {
      this.getSubjectList()
    },
    // 清除按钮
    eliminate () {
      this.queryInfo.keyword = ''
      this.getSubjectList()
    },
    // 过滤题型
    type (row) {
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 删除
    deleteBtn (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: id })
        this.$message.success('删除成功')
        this.getSubjectList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 预览
    async preview (id) {
      const { data: res } = await detail({ id: id })
      console.log(res)
      this.previewVisible = true
      this.previewQuestion = res
    }
  },
  filters: {
    questionType: function (value) {
      switch (value) {
        case '1':
          return '单选题'
        case '2':
          return '多选题'
        case '3':
          return '简答题'
      }
    },
    difficulty: function (value) {
      switch (value) {
        case '1':
          return '简单'
        case '2':
          return '中等'
        case '3':
          return '困难'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box-strong{
  margin-left: 10px;
}
.box-ipt{
  display: inline-block;
  padding: 0 10px;
  width:230px;
}
.box-alert{
  margin: 20px 0px;
}
#elFlex{
  margin: -5px 2px;
}
.paging-right{
  float: right;
  margin: 15px;
}
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
